<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Comicblocks</title>
<link href='http://fonts.googleapis.com/css?family=Piedra' rel='stylesheet' type='text/css'>
	<!-- Main CSS -->
	<link rel="stylesheet" type="text/css" href="css/themes/style_black.css" >
	<!---- Nivo Slider CSS -->
    <link rel="stylesheet" href="css/nivo-slider/themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/nivo-slider/themes/light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/nivo-slider/themes/dark/dark.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/nivo-slider/themes/bar/bar.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/nivo-style.css" type="text/css" media="screen" />
	<!---- Slider 1 CSS ---->
	<link type="text/css" href="css/slider_1/jquery.ui.theme.css" rel="stylesheet" />
	<link type="text/css" href="css/slider_1/jquery.ui.core.css" rel="stylesheet" />
    <link type="text/css" href="css/slider_1/jquery.ui.slider.css" rel="stylesheet" />
	<link rel="stylesheet" href="css/slider_1/slider_1_style.css" type="text/css" media="screen"/>
	<!--- Slider 1 Scripts --->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
	<script type="text/javascript" src="scripts/slider_1/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="scripts/slider_1/slider.js"></script>
	<!--- Script for login and browse menu popup --->
	<script>
		  $(document).ready(function(){
			  	$('#login-trigger').next('#login-content').slideDown();
				$('#login-trigger').hover(function(){
					$('#browse-trigger').next('#browse-content').slideUp();
				})
				$('#login-trigger').click(function(){
					$(this).next('#login-content').slideToggle();
					$(this).toggleClass('active');					
					
					if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
						else $(this).find('span').html('&#x25BC;')
					})
					
				$('#browse-trigger').mouseenter(function(){
					$('#browse-trigger').next('#browse-content').slideDown();
					$('#login-trigger').next('#login-content').slideUp();

					})
	
				$('#browse-content').mouseleave(function(){
					$('#browse-trigger').next('#browse-content').slideUp();
					if (!$('#login-trigger').hasClass('active'))
					$('#login-trigger').next('#login-content').slideDown();

					})
			    
		  });
		  
		  
	</script>

</head>

<body>

	
    <header>
        <div id="navig">
        	
           <nav>
                <form method="get" action="/search" id="search">
  				<input name="q" type="text" size="40" placeholder="Search..." />
				</form>
        <ul>
        
        		<li id="browse">
                        <a id="browse-trigger" href="#">Browse</a>
                        <div id="browse-content">
							<div><ul>
                            	<li> <a href="#">Action</a> </li>
                                <li> <a href="#">New This Month</a> </li>
                                <li> <a href="#">Comedy</a> </li>
                                <li> <a href="#">Featured</a> </li>
                                <li> <a href="#">Adventure</a> </li>
                                <li> <a href="#">Tutorials</a> </li>
                                <li> <a href="#">Drama</a> </li>
                                <li> <a href="#">News</a> </li>
                               
                               
                                
                            </ul></div>
                        </div>
                        
                </li>
                <li id="login">
                        <a id="login-trigger" href="#">
                                Log in / Sign up <span>▼</span>
                        </a>
                        <div id="login-content">
                                <form>
                                        <fieldset id="inputs">
                                                <input id="username" type="email" name="Email" placeholder="Your email address" required>
                                                <input id="password" type="password" name="Password" placeholder="Password" required>
                                        </fieldset>
                                        <fieldset id="actions">
                                                <input type="submit" id="submit" value="Log in">
                                                <input type="submit" id="submit" value="Sign up">
                                               
                                        </fieldset>
                                </form>
                        </div>
                </li>
        </ul>
</nav>
     </div>
    </header>
	<div id="black_spacer"> </div>
    <section id="content">
    	    
		<div id="wrapper">
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">

            
			
        </div>

    </div>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="scripts/nivo-slider/jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>   
            <article id="new_blocks">
            	
			<div id="fp_gallery" class="fp_gallery">
			
			


			<ul id="fp_galleryList" class="fp_galleryList">
				<li>New Blocks</li>
				<li>Trending Blocks</li>
			</ul>
			<div id="fp_thumbContainer">
				<div id="fp_thumbScroller">
					<div class="container">
						<div class="content">
							<div><a href="#"><img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" /></a></div>
						</div>
					</div>
					<div class="container">
						<div class="content">
							<div><a href="#"><img src="images/album2/thumbs/1.jpg" alt="images/album2/1.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album2/thumbs/2.jpg" alt="images/album2/2.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album2/thumbs/3.jpg" alt="images/album2/3.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album2/thumbs/1.jpg" alt="images/album2/1.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album2/thumbs/2.jpg" alt="images/album2/2.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album2/thumbs/3.jpg" alt="images/album2/3.jpg" class="thumb" /></a></div>
						</div>						
						<div class="content">
							<div><a href="#"><img src="images/album2/thumbs/1.jpg" alt="images/album2/1.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album2/thumbs/2.jpg" alt="images/album2/2.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album2/thumbs/3.jpg" alt="images/album2/3.jpg" class="thumb" /></a></div>
						</div>						
						<div class="content">
							<div><a href="#"><img src="images/album2/thumbs/1.jpg" alt="images/album2/1.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album2/thumbs/2.jpg" alt="images/album2/2.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album2/thumbs/3.jpg" alt="images/album2/3.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album2/thumbs/1.jpg" alt="images/album2/1.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album2/thumbs/2.jpg" alt="images/album2/2.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album2/thumbs/3.jpg" alt="images/album2/3.jpg" class="thumb" /></a></div>
						</div>

					</div>
					
				</div>
			</div>

			<div id="fp_scrollWrapper" class="fp_scrollWrapper">
				<span id="fp_prev_thumb" class="fp_prev_thumb"></span>
				<div id="slider" class="slider"></div>
				<span id="fp_next_thumb" class="fp_next_thumb"></span>
			</div>

			<div id="fp_overlay" class="fp_overlay"></div>
			<div id="fp_loading" class="fp_loading"></div>
			<div id="fp_next" class="fp_next"></div>
			<div id="fp_prev" class="fp_prev"></div>
			<div id="fp_close" class="fp_close">Close preview</div>
		</div>
               
        	</article>
            
            <article id="popular">
            	<h2>Trending Blocks </h2>
            	<div class="line"> </div>
                <div class="popular_content">
                
                </div>
        	</article>
            
          
            
    </section>
</body>
</html>
